<template>
  <el-form
    ref="zipcodeForm"
    :model="form"
    :rules="rules"
    label-width="150px"
    size="mini"
  >
    <el-form-item prop="zipCode" label-width="150px" label="邮编">
      <el-input size="mini" v-model="form.zipCode"></el-input>
    </el-form-item>
  </el-form>
</template>

<script>
export default {
  data() {
    return {
      form: {
        zipCode: ""
      },
      rules: {
        zipCode: [
          { required: true, message: "请输入邮编", trigger: "change" }
        ],
      }
    };
  },

  mounted() {
    if (this.$store.state.edit.row.zipCode) {
      this.form.zipCode = this.$store.state.edit.row.zipCode;
    }
  },
  methods: {
    callbefore() {
      this.$store.state.edit.row.zipCode = this.form.zipCode;
    },
    callvalidate() {
      const country = this.$store.state.edit.row.country;
      if (!this.form.zipCode) {
        this.$notify.error({
          position: "bottom-right",
          title: "错误",
          message: "请填写邮编"
        });
        return false;
      }
      const reg1 = /^((\d{5})*(-\d{4})|(\d{5}))$/;
      if (parseFloat(country) === 329 && !reg1.test(this.form.zipCode)) {
        this.$notify.error({
          position: "bottom-right",
          title: "错误",
          message: "格式错误，美国邮编请填入XXXXX或者XXXXX-XXXX"
        });
        return false;
      }
      return true;
    }
  }
};
</script>

<style scoped>
/deep/ .el-form-item__content {
  padding: 0 5px 0 15px;
}
/deep/ .el-input {
  width: 80%;
}
</style>
